// 在项目的根目录去创建webpack.config.js。将作为webpack的配置文件

// webpack用的是nodejs开发的，这个文件要遵循CommonJs规范
const path = require("path");
// 安装的插件是需要引入的，转换器不需要
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // mode表示模式，'development' or 'production'， 默认是production
  mode: "production",

  // 可以根据entry选项来配置项目的入口文件
  // entry是可以设置多入口，项目也可以做成多页面应用
  entry: "./src/main.js",

  // 可以根据output选项来配置项目的出口
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "index.js",
  },

  // module表示的是转换器，可以将那些webpack不认识的文件转成它认识的js或者json文件
  module: {
    // rules是一个数组，每一项都是一种转换规则
    rules: [
      { test: /\.txt$/, use: "raw-loader" },
      // css-loader是将css文件转成js
      // style-loader是将js重新转成css
      // loader都需要倒着写
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },

  // plugins表示插件
  // loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "./src/public/index.html"),
    }),
  ],
};
